{% extends 'admin.html' %}
{% import 'public.html' as public %}


{% block head_css %}
{{ super() }}
{{ public.DataTables_CSS() }}
{{ public.Select2_CSS() }}
{{ public.BootstrapSelect_CSS() }}
<style>@page{size:auto}</style>
{% endblock %}


<!--導航-->
{% block navbar_left %}
<li class="nav-item">
    <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
    <a href="#" class="nav-link text-info" data-toggle="modal" data-target="#AskModal" data-callback="Logout" data-message="確認登出系統嗎？">
        <i class="fas fa-sign-out-alt"></i> 登出系統
    </a>
</li>
<li class="nav-item d-none d-sm-inline-block">
    <a href="#" class="nav-link text-success" onclick="window.location.reload()"><i class="fas fa-sync-alt"></i> 刷新頁面</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
    <a href="#" class="nav-link text-warning" data-toggle="modal" data-target="#AskModal" data-callback="Restart" data-message="確認重啓服務嗎？">
        <i class="fas fa-sync-alt"></i> 重啓服務
    </a>
</li>
<li class="nav-item d-none d-sm-inline-block">
    <a href="#" class="nav-link text-warning" data-toggle="modal" data-target="#AskModal" data-callback="Reboot" data-message="確認重啓設備嗎？">
        <i class="fas fa-redo-alt"></i> 重啓設備
    </a>
</li>
<li class="nav-item d-none d-sm-inline-block">
    <a href="#" class="nav-link text-danger" data-toggle="modal" data-target="#AskModal" data-callback="Halt" data-message="確認關閉設備嗎？">
        <i class="fas fa-power-off"></i> 關閉系統
    </a>
</li>
<li class="nav-item d-none d-sm-inline-block">
    <a href="#" class="nav-link text-secondary" data-toggle="modal" data-target="#AskModal" data-callback="Debug" 
    data-message="{% if DebugState %}暫停{% else %}開始{% endif %}功能演示嗎？">
        <i class="fas {% if DebugState %}fa-pause{% else %}fa-play{% endif %}"></i> 功能演示
    </a>
</li>
{% endblock %}


<!--右側功能-->
{% block navbar_right %}
<li class="nav-item d-none d-sm-inline-block" id="Clock">
    <span class="text-secondary" style="font-size: xx-large;font-weight: bolder;">{[ AppDateTime ]}&nbsp;</span>
    <span class="badge badge-primary" style="font-size: x-large;font-weight: bolder;">{[ AppWeekDay ]}</span>
</li>
<!-- Full Screen -->
<li class="nav-item">
    <a class="nav-link" data-widget="fullscreen" href="#" role="button" id="fullscreen_bt" title="全屏幕">
        <i class="fas fa-expand-arrows-alt fa-2x"></i>
    </a>
</li>
{% endblock %}


<!--是否打开菜单-->
{% macro check_menu_open(blueprint_name) %}
{% if request.blueprint == blueprint_name %} menu-open {% else %}{% endif %}
{% endmacro %}

<!--是否激活菜单-->
{% macro check_menu_active(blueprint_name) %}
{% if request.blueprint == blueprint_name %} active {% else %}{% endif %}
{% endmacro %}

<!--是否选中菜单-->
{% macro check_link_active(path_name) %}
{% if request.path == path_name %} active {% else %}{% endif %}
{% endmacro %}


<!--功能菜單-->
{% block sidebar_menu %}
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
    <li class="nav-item {{ check_menu_open('charge') }}">
        <a href="#" class="nav-link {{ check_menu_active('charge') }}">
            <i class="nav-icon fas fa-donate"></i><p>收費功能<i class="right fas fa-angle-left"></i></p>
        </a>
        <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="{{ url_for('charge.preview') }}" class="nav-link {{ check_link_active(url_for('charge.preview')) }}">
                    <i class="fas fa-tachometer-alt nav-icon"></i><p>閘口預覽</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#HourlyPayModal">
                    <i class="fas fa-hand-holding-usd nav-icon"></i><p>時租收費</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#HourlyTicketModal">
                    <i class="fas fa-ticket-alt nav-icon"></i><p>失票處理</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#MonthlyPayModal">
                    <i class="fas fa-money-check-alt nav-icon"></i><p>月租續費</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('charge.classes') }}" class="nav-link {{ check_link_active(url_for('charge.classes')) }}">
                    <i class="fas fa-edit nav-icon"></i><p>收費記錄</p>
                </a>
            </li>
        </ul>
    </li>
    <li class="nav-item {{ check_menu_open('records') }}">
        <a href="#" class="nav-link {{ check_menu_active('records') }}">
            <i class="nav-icon fas fa-exchange-alt"></i><p>車輛記錄<i class="right fas fa-angle-left"></i></p>
        </a>
        <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="{{ url_for('records.parking') }}" class="nav-link {{ check_link_active(url_for('records.parking')) }}">
                    <i class="far fa-circle nav-icon"></i><p>在場車輛</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('records.entrance') }}" class="nav-link {{ check_link_active(url_for('records.entrance')) }}">
                    <i class="far fa-circle nav-icon"></i><p>入口記錄</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('records.exit') }}" class="nav-link {{ check_link_active(url_for('records.exit')) }}">
                    <i class="far fa-circle nav-icon"></i><p>出口記錄</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('records.past') }}" class="nav-link {{ check_link_active(url_for('records.past')) }}">
                    <i class="far fa-circle nav-icon"></i><p>通過記錄</p>
                </a>
            </li>
        </ul>
    </li>
    {% if page_user.can(permissions.manager) %}
    <li class="nav-item {{ check_menu_open('members') }}">
        <a href="#" class="nav-link {{ check_menu_active('members') }}">
            <i class="nav-icon fas fa-address-book"></i><p>月租功能<i class="right fas fa-angle-left"></i></p>
        </a>
        <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="{{ url_for('members.monthly') }}" class="nav-link {{ check_link_active(url_for('members.monthly')) }}">
                    <i class="far fa-circle nav-icon"></i><p>用戶管理</p>
                </a>
            </li>
        </ul>
    </li>
    <li class="nav-item {{ check_menu_open('recovery') }}">
        <a href="#" class="nav-link {{ check_menu_active('recovery') }}">
            <i class="nav-icon fas fa-receipt"></i><p>恢復記錄<i class="right fas fa-angle-left"></i></p>
        </a>
        <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="{{ url_for('recovery.parking') }}" class="nav-link {{ check_link_active(url_for('recovery.parking')) }}">
                    <i class="far fa-circle nav-icon"></i><p>在場記錄</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('recovery.charge') }}" class="nav-link {{ check_link_active(url_for('recovery.charge')) }}">
                    <i class="far fa-circle nav-icon"></i><p>收費記錄</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('recovery.past') }}" class="nav-link {{ check_link_active(url_for('recovery.past')) }}">
                    <i class="far fa-circle nav-icon"></i><p>通過記錄</p>
                </a>
            </li>
        </ul>
    </li>
    <li class="nav-item {{ check_menu_open('reports') }}">
        <a href="#" class="nav-link {{ check_menu_active('reports') }}">
            <i class="nav-icon fas fa-poll"></i><p>車場報表<i class="right fas fa-angle-left"></i></p>
        </a>
        <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="{{ url_for('reports.past') }}" class="nav-link {{ check_link_active(url_for('reports.past')) }}">
                    <i class="far fa-circle nav-icon"></i><p>出入報表</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('reports.charge') }}" class="nav-link {{ check_link_active(url_for('reports.charge')) }}">
                    <i class="far fa-circle nav-icon"></i><p>收費報表</p>
                </a>
            </li>
        </ul>
    </li><li class="nav-item {{ check_menu_open('carpark') }}">
        <a href="#" class="nav-link {{ check_menu_active('carpark') }}">
            <i class="nav-icon fas fa-tools"></i><p>車場管理<i class="right fas fa-angle-left"></i></p>
        </a>
        <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="{{ url_for('carpark.setting') }}" class="nav-link {{ check_link_active(url_for('carpark.setting')) }}">
                    <i class="far fa-circle nav-icon"></i><p>車場設定</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('carpark.place') }}" class="nav-link {{ check_link_active(url_for('carpark.place')) }}">
                    <i class="far fa-circle nav-icon"></i><p>車位設定</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('carpark.user') }}" class="nav-link {{ check_link_active(url_for('carpark.user')) }}">
                    <i class="far fa-circle nav-icon"></i><p>收費員</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('carpark.rule') }}" class="nav-link {{ check_link_active(url_for('carpark.rule')) }}">
                    <i class="far fa-circle nav-icon"></i><p>收費規則</p>
                </a>
            </li>
        </ul>
    </li>
    {% endif %}
    {% if page_user.can(permissions.admin) %}
    <li class="nav-item {{ check_menu_open('server') }}">
        <a href="#" class="nav-link {{ check_menu_active('server') }}">
            <i class="nav-icon fas fa-server"></i><p>服務管理<i class="right fas fa-angle-left"></i></p>
        </a>
        <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="{{ url_for('server.setting') }}" class="nav-link {{ check_link_active(url_for('server.setting')) }}">
                    <i class="far fa-circle nav-icon"></i><p>系統設定</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('server.network') }}" class="nav-link {{ check_link_active(url_for('server.network')) }}">
                    <i class="far fa-circle nav-icon"></i><p>網絡設定</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('server.users') }}" class="nav-link {{ check_link_active(url_for('server.users')) }}">
                    <i class="far fa-circle nav-icon"></i><p>用戶管理</p>
                </a>
            </li>
        </ul>
    </li>
    <li class="nav-item {{ check_menu_open('devices') }}">
        <a href="#" class="nav-link {{ check_menu_active('devices') }}">
            <i class="nav-icon fas fa-sitemap"></i><p>設備管理<i class="right fas fa-angle-left"></i></p>
        </a>
        <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="{{ url_for('devices.gate') }}" class="nav-link {{ check_link_active(url_for('devices.gate')) }}">
                    <i class="far fa-circle nav-icon"></i><p>車場閘機</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('devices.camera') }}" class="nav-link {{ check_link_active(url_for('devices.camera')) }}">
                    <i class="far fa-circle nav-icon"></i><p>識別相機</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('devices.led') }}" class="nav-link {{ check_link_active(url_for('devices.led')) }}">
                    <i class="far fa-circle nav-icon"></i><p>顯示屏</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('devices.cashier') }}" class="nav-link {{ check_link_active(url_for('devices.cashier')) }}">
                    <i class="far fa-circle nav-icon"></i><p>收費處</p>
                </a>
            </li>
        </ul>
    </li>
    <li class="nav-item {{ check_menu_open('logs') }}">
        <a href="#" class="nav-link {{ check_menu_active('logs') }}">
            <i class="nav-icon fas fa-outdent"></i><p>運行日志<i class="right fas fa-angle-left"></i></p>
        </a>
        <ul class="nav nav-treeview">
            <li class="nav-item">
                <a href="{{ url_for('logs.carpark') }}" class="nav-link {{ check_link_active(url_for('logs.carpark')) }}">
                    <i class="far fa-circle nav-icon"></i><p>服務日志</p>
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ url_for('logs.camera') }}" class="nav-link {{ check_link_active(url_for('logs.camera')) }}">
                    <i class="far fa-circle nav-icon"></i><p>識別日志</p>
                </a>
            </li>
        </ul>
    </li>
    {% endif %}
</ul>
{% endblock %}


<!--彈窗-->
{% block modals %}
{{ super() }}
{{ public.custom_info(custom) }}
<!--系统对话框-->
<div class="modal fade" id="AskModal" data-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
        <div class="modal-header justify-content-center">
            <h2 class="modal-title" :class="ask.callback=='Logout'?'text-info':'text-danger'"><i class="fas fa-exclamation-triangle"></i> 請注意</h2>
        </div>
        <div class="modal-body text-center">
            <p class="h5">{[ ask.message ]}</p>
        </div>
        <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-success" @click="confirm_event">確認</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        </div>
        </div>
        <!-- /.modal-content -->
    </div>
<!-- /.modal-dialog -->
</div>
<!--用户对话框-->
<div class="modal fade" id="PageUserModal" data-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="PageUserForm">
                <div class="modal-header justify-content-center">
                    <h3 class="modal-title">更新用戶信息</h3>
                </div>
                <div class="modal-body">
                    <div v-for="(val, key) in UserInfo" class="form-group row justify-content-center">
                        <label class="col-sm-3 col-form-label text-center">{[ ColumnName[key] ]}：</label>
                        <div class="col-sm-8">
                          <input v-model="UserInfo[key]" class="form-control" 
                          :readonly="key=='LoginName'?'readonly':false"
                          :type="key=='Password'?'password':'text'" :name="key">
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="submit" class="btn btn-success">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<a id="scrobutton" href="#" class="btn btn-primary back-to-top" role="button" aria-label="Scroll to top" style="margin-bottom: 45px; display: none;">
    <i class="fas fa-chevron-up"></i>
</a>
{% endblock %}

<!--頁面脚本-->
{% block scripts %}
{{ super() }}
{{ public.Select2_JS() }}
{{ public.BootstrapSelect_JS() }}
{{ public.DataTables_JS() }}
{{ public.LayDate_JS() }}
{{ public.public_scripts(carpark_datetime) }}
<script>
    // 用户详情
    var CurrentUser = new Vue({
        el: '#PageUserModal',
        delimiters: ['{[', ']}'],
        data: {
            UserInfo: {
                LoginName: '{{ page_user.LoginName }}', 
                UserName: '{{ page_user.UserName }}',
                Password: '',
            },
            ColumnName:{LoginName:'登錄名',UserName:'用戶名',Password:'登錄密碼'}
        },
        methods: {
            // 提交用户信息
            commit_user_info(){
                axios.post("{{ url_for('interface.user_info') }}", {UpdateUser: this.UserInfo})
                .then(response => {
                    if(response.status==200){
                        let ret = response.data
                        AppMessage.fire({icon: ret.icon, text: ret.text})
                        if(ret.icon=='success'){$("#PageUserModal").modal('toggle');setTimeout("window.location.reload()", 2200)}
                    }else{AppMessage.fire({icon: 'error', text: '更新錯誤，請聯係管理員'})}
                })
                .catch(function (error) {alert(error)})
            }
        },
        mounted: function(){
            // 用户信息校验
            $('#PageUserForm').validate({
                rules: {
                    LoginName: {required: true},
                    UserName: {required: true},
                    Password: {minlength: 6},
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.col-sm-8').append(error);
                },
                highlight: function (element, errorClass, validClass) {$(element).addClass('is-invalid')},
                unhighlight: function (element, errorClass, validClass) {$(element).removeClass('is-invalid')},
                submitHandler: function (){CurrentUser.commit_user_info()},
            });
        }
    });

    // 系统对话框
    var AskModal = new Vue({
        el: '#AskModal',
        delimiters: ['{[', ']}'],
        data: { ask:{title: '', message: '', callback: ''},},
        methods: {
            // 系统事件确认
            confirm_event(){
                if(this.ask.callback=='Logout'){
                    $("#AskModal").modal('toggle')
                    AppMessage.fire({icon: 'warning', text: '正在登出系統...'})
                    setTimeout("window.location.href='{{ url_for('auth.logout') }}'", 2200)
                }else{
                    axios.post("{{ url_for('interface.system') }}", {CallBack: this.ask.callback})
                    .then(response => {
                        if(response.status==200){let ret = response.data;AppMessage.fire({icon: ret.icon, text: ret.text})
                            if(ret.icon=='warning'||ret.icon=='success'){
                                $("#AskModal").modal('toggle');setTimeout("window.location.href='{{ url_for('index.default') }}'", 2200)}
                        }else{AppMessage.fire({icon: 'error', text: '請求錯誤，請聯係管理員'})}
                    })
                    .catch(function (error) {alert(error)})}
            },
            // 对话框事件
            button_click(key, message){
                this.ask.message = message
                switch(key){
                    case 'Logout': this.ask.title='登出系統'; this.ask.callback='Logout';break
                    case 'Restart': this.ask.title='重啓服務'; this.ask.callback='Restart';break
                    case 'Reboot': this.ask.title='重啓系統'; this.ask.callback='Reboot';break
                    case 'Halt': this.ask.title='關閉系統'; this.ask.callback='Halt';break
                    case 'Debug': this.ask.title='出入演示'; this.ask.callback='Debug';break
                }
            }
        },
        mounted: function(){
            // 按键事件
            $("#AskModal").on('show.bs.modal', function (event) {
            let button = $(event.relatedTarget) 
            let callback = button.data('callback')
            let message = button.data('message')
            AskModal.button_click(callback, message)
            });
        }
    });
</script>
{{ public.carpark_style() }}
{% endblock %}





